import React, { useEffect, useRef, useState } from 'react';

import { Button, Tag, Space, Card, Empty, Select, Spin, Collapse } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import ColumChart from './component/ColumChart';
import { useRequest, history } from 'umi';
import styles from './index.less';
import { Chrono } from 'react-chrono';
import moment from 'moment';
import AchieveTimeLine from './component/AchieveTimeLine';

const { Option } = Select;
const { Statistic, Divider } = StatisticCard;

export default (prop: any) => {
  const [tableName, setTableName] = useState('PAPER');

  const [chartData, setChartData] = useState<any>(false);
  const [barData, setBarData] = useState<any>(false);

  //人看板
  const getPersonalBoard = useRequest(
    (userId) => {
      return {
        url: `http://10.1.40.84:9993/board/getPersonalBoard?userId=${userId}`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
    },
  );

  useEffect(() => {
    console.log(prop);
    if (prop.userId) {
      getPersonalBoard.run(prop.userId).then((data) => {
        setChartData(data.chart);
        setBarData(data.bar);
      });
    }
  }, [prop.userId]);

  const handleChange = (value: any) => {
    setTableName(value);
  };

  return (
    <Spin spinning={getPersonalBoard.loading}>
      <ProCard
        title="科研成果概览"
        split={'vertical'}
        headerBordered
        bordered
        loading={getPersonalBoard?.loading}
      >
        <ProCard split="horizontal" colSpan={24}>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '论文数量',
                value: chartData?.paper,
              }}
            />
            <StatisticCard
              statistic={{
                title: '纵向项目数量',
                value:
                  (chartData?.vertProject?.overcount || '0') +
                  '/' +
                  (chartData?.vertProject?.undercount || '0'),
                description: (
                  <Statistic
                    title="到账"
                    value={chartData?.vertProject?.money}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '横向项目数量',
                value:
                  chartData?.horProject?.overcount ||
                  '0' + '/' + (chartData?.horProject?.undercount || '0'),
                description: (
                  <Statistic
                    title="到账"
                    value={chartData?.horProject?.money}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '国际合作项目数数量',
                value: 0 + '/' + 0,
                description: (
                  <Statistic
                    title="到账"
                    value={0}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '软件著作',
                value: chartData.softwareCopyright,
              }}
            />
          </ProCard>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '专著',
                value: chartData?.book,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '制定标准',
                value: 0,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '获得奖项',
                value: chartData?.reward,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '申请专利',
                value: chartData?.patent,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '授权专利',
                value: chartData?.grantPatent,
                suffix: '',
              }}
            />
          </ProCard>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '人才称号',
                value: (chartData.省部级 || 0) + (chartData.国家级 || 0),
                description: (
                  <Space>
                    <Statistic
                      title="省部级"
                      value={chartData.省部级 || 0}
                      suffix={''}
                      valueStyle={{ color: 'red' }}
                    />
                    <Statistic
                      title="国家级"
                      value={chartData.国家级 || 0}
                      suffix={''}
                      valueStyle={{ color: 'red' }}
                    />
                  </Space>
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '仪器设备研制',
                value: chartData.equipmentDevelop,
                suffix: '',
              }}
            />

            <StatisticCard
              statistic={{
                title: '成果转化',
                value: chartData.achieveTrans,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '年度标志性成果',
                value: chartData.yearProject,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '其他标志性成果',
                value: chartData.other,
                suffix: '',
              }}
            />
          </ProCard>
        </ProCard>
      </ProCard>
      <Divider />
      <ProCard split="vertical">
        <ProCard
          title={'科研成果时间线'}
          extra={
            <Space>
              <span>选择成果类型：</span>
              <Select
                defaultValue="PAPER"
                style={{ width: 160 }}
                onSelect={handleChange}
              >
                <Option value="HORIZONTAL_PROJECT">横向项目</Option>
                <Option value="VERTICAL_PROJECT">纵向项目</Option>
                <Option value="INTER_CPT_PROJECT">国际合作项目</Option>
                <Option value="PAPER">论文</Option>
                <Option value="BOOK_PUBLISH">专著</Option>
                <Option value="STANDARD">标准</Option>
                <Option value="REWARD">奖励</Option>
                <Option value="PATENT">申请专利</Option>
                <Option value="GRANT_PATENT">授权专利</Option>
                <Option value="ACHIEVE_TRANS">成果转换</Option>
                <Option value="SOFTWARE_COPYRIGHT">软件著作权</Option>
                <Option value="EQUIPMENT_DEVELOP">仪器设备研制</Option>
                <Option value="OTHER_ACHIEVE">其他标志性成果</Option>
                <Option value="YEAR_ACHIEVE">年度标志性成果</Option>
              </Select>
            </Space>
          }
        >
          <AchieveTimeLine tableName={tableName} authorsInfo={prop} />
        </ProCard>
        {/* <ProCard title="科研成果详情" headerBordered bodyStyle={{ paddingLeft: 0 }}>
                    <ProTable<GithubIssueItem>
                        columns={columns}
                        actionRef={actionRef}
                        cardBordered={false}
                        dataSource={dataSource}
                        search={false}
                        rowKey="id"
                        dateFormatter="string"
                        options={false}
                        size={"small"}
                        pagination={{
                            hideOnSinglePage: true,
                        }}
                    />
                </ProCard> */}
      </ProCard>
      <Divider />
      <Card title={'科研成果总览'}>
        <div style={{ paddingLeft: 20, paddingRight: 20 }}>
          {barData ? (
            <ColumChart chartData={barData} />
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </div>
      </Card>
      <Divider />
    </Spin>
  );
};
